<template>
   <div ref="echart"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
   props: {
      // 定义一个属性把饼图区分
      isAxisChart: {
         type: Boolean,
         default: true
      },
      chartData: {
         type: Object,
         default() {
            return {
               xData: [],
               series: []
            }
         }
      }
   },
   watch: {
      chartData: {
         deep: true,
         handler() {
            this.initChart()
         }
      }
   },

   data() {
      return {
         axisOption: {
            legend: {
               // 图例文字颜色
               textStyle: {
                  color: '#333'
               }
            },
            grid: {
               left: '15%'
            },
            // 提示框:
            tooltip: {
               trigger: 'item'
            },
            xAxis: {
               type: 'category', //类目轴
               data: [],
               axisLine: {
                  lineLine: {
                     color: '#17b3a3'
                  }
               },
               axisLabel: {
                  interval: 0,
                  color: '#333'
               }
            },
            yAxis: [
               {
                  type: 'value',
                  axisLine: {
                     lineStyle: {
                        color: '#17b3a3'
                     }
                  }
               }
            ],
            color: [
               '#2ec7c9',
               '#b6a2de',
               '#5ab1ef',
               '#ffb980',
               '#d87a80',
               '#8d98b3'
            ],
            series: []
         },
         normalOption: {
            legend: {
               top: '0%',
               left: 'center'
            },
            tooltip: {
               trigger: 'item'
            },
            color: [
               '#0f78f4',
               '#dd536b',
               '#9462e5',
               '#a6a6a6',
               '#e1bb22',
               '#39c362',
               '#3ed1cf'
            ],
            series: []
         },
         echart: null
      }
   },
   computed: {
      options() {
         return this.isAxisChart ? this.axisOption : this.normalOption
      }
   },
   methods: {
      initChart() {
         this.initChartData()
         if (this.echart) {
            this.echart.setOption(this.options)
         } else {
            this.echart = echarts.init(this.$refs.echart)
            this.echart.setOption(this.options)
         }
      },
      initChartData() {
         if (this.isAxisChart) {
            this.axisOption.xAxis.data = this.chartData.xData
            this.axisOption.series = this.chartData.series
         } else {
            this.normalOption.series = this.chartData.series
         }
      }
   }
}
</script>

<style lang="less" scoped>
</style>